<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<body>
<div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:ee="incrementTotal"></button-counter>
    <button-counter v-on:ee="incrementTotal"></button-counter>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('button-counter', {
        template: '<div><button v-on:click="increment">{{ counter }}</button> <span v-on:click="spanbtn">click me</span></div>',
        data: function () {
            return {
                counter: 0,

            }
        },
        methods: {
            increment: function () {
                this.counter += 1
                this.$emit('ee', '我就是子组件回传回来的参数' )
//                子组件通过$emit触发父组件的事件，$emit后面的参数是向父组件传参，注意，父组件的事件处理函数直接写函数名即可，不要加(),参数直接传递到了父组件的methods的事件处理函数了。
            },
            spanbtn: function () {
                this.$emit('ee', '我是另外的span事件回传的值' )
//                子组件通过$emit触发父组件的事件，$emit后面的参数是向父组件传参，注意，父组件的事件处理函数直接写函数名即可，不要加(),参数直接传递到了父组件的methods的事件处理函数了。
            }
        },
    })
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 'arg'
        },
        methods: {
            incrementTotal: function (b) {
                this.total  = b + '1';
            }
        }
    })
</script>
</body>